<template>
  <div class="app-container">
    <div ref="expertNumProportionChart" style="width: 800px;height: 400px" />
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="工作名称" prop="workName">
        <el-input
          v-model="queryParams.workName"
          placeholder="请输入工作名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="票据编码" prop="mainBizKey">
        <el-input
          v-model="queryParams.mainBizKey"
          placeholder="请输入票据编码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="流程名称" prop="flowName">
        <el-input
          v-model="queryParams.flowName"
          placeholder="请输入流程名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="签字时间" prop="signDate">-->
      <!--        <el-date-picker clearable size="small"-->
      <!--          v-model="queryParams.signDate"-->
      <!--          type="date"-->
      <!--          value-format="yyyy-MM-dd"-->
      <!--          placeholder="选择签字时间">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="完成时间" prop="finishedDatetime">-->
      <!--        <el-date-picker clearable size="small"-->
      <!--          v-model="queryParams.finishedDatetime"-->
      <!--          type="date"-->
      <!--          value-format="yyyy-MM-dd"-->
      <!--          placeholder="选择完成时间">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <el-form-item label="活动名称" prop="activityName">
        <el-input
          v-model="queryParams.activityName"
          placeholder="请输入活动名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发起人名称" prop="sponsorName">
        <el-input
          v-model="queryParams.sponsorName"
          placeholder="请输入发起人名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      <el-form-item label="创建时间" prop="createDatetime">-->
      <!--        <el-date-picker clearable size="small"-->
      <!--          v-model="queryParams.createDatetime"-->
      <!--          type="date"-->
      <!--          value-format="yyyy-MM-dd"-->
      <!--          placeholder="选择创建时间">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="预测时间" prop="predictDatetime">-->
      <!--        <el-date-picker clearable size="small"-->
      <!--          v-model="queryParams.predictDatetime"-->
      <!--          type="date"-->
      <!--          value-format="yyyy-MM-dd"-->
      <!--          placeholder="选择预测时间">-->
      <!--        </el-date-picker>-->
      <!--      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="primary"-->
      <!--          plain-->
      <!--          icon="el-icon-plus"-->
      <!--          size="mini"-->
      <!--          @click="handleAdd"-->
      <!--          v-hasPermi="['process:Handlbilltrace:add']"-->
      <!--        >新增</el-button>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="success"-->
      <!--          plain-->
      <!--          icon="el-icon-edit"-->
      <!--          size="mini"-->
      <!--          :disabled="single"-->
      <!--          @click="handleUpdate"-->
      <!--          v-hasPermi="['process:Handlbilltrace:edit']"-->
      <!--        >修改</el-button>-->
      <!--      </el-col>-->
      <!--      <el-col :span="1.5">-->
      <!--        <el-button-->
      <!--          type="danger"-->
      <!--          plain-->
      <!--          icon="el-icon-delete"-->
      <!--          size="mini"-->
      <!--          :disabled="multiple"-->
      <!--          @click="handleDelete"-->
      <!--          v-hasPermi="['process:Handlbilltrace:remove']"-->
      <!--        >删除</el-button>-->
      <!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['process:Handlbilltrace:export']"
        >导出
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="HandlbilltraceList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="票据编码" align="center" prop="mainBizKey"/>
      <!--      <el-table-column label="工作ID" align="center" prop="workId" />-->
      <el-table-column label="工作名称" align="center" prop="workName"/>
      <!--      <el-table-column label="流程ID" align="center" prop="flowId" />-->
      <el-table-column label="流程名称" align="center" prop="flowName"/>
      <el-table-column label="活动名称" align="center" prop="activityName"/>
      <!--      <el-table-column label="工作项ID" align="center" prop="workItemId" />-->
      <el-table-column label="创建时间" align="center" prop="createDatetime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDatetime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发起人" align="center" prop="sponsorName"/>
      <el-table-column label="审批时间" align="center" prop="workItemDatetime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.workItemDatetime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="审批者名称" align="center" prop="receiverName"/>
      <!--      <el-table-column label="工作活动状态" align="center" prop="workActivityState" />-->
      <el-table-column label="完成时间" align="center" prop="finishedDatetime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.finishedDatetime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <!--      <el-table-column label="下一活动编码" align="center" prop="nextActivityCodes" />-->
      <!--      <el-table-column label="活动ID" align="center" prop="activityId" />-->
      <!--      <el-table-column label="活动序号" align="center" prop="activityCode"/>-->
      <!--      <el-table-column label="下一活动序号" align="center" prop="nextActivityCode" />-->
      <el-table-column label="预测时间" align="center" prop="predictDatetime" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.predictDatetime, '{y}-{m}-{d} {h}:{m}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="签字时间" align="center" prop="signDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.signDate, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="签字人" align="center" prop="signName"/>
      <el-table-column label="流程执行状态" align="center" prop="receiverName" style="color: red">
        <template slot-scope="scope">
          <div :style="{ color: scope.row.finishedDatetime>scope.row.predictDatetime ? 'red' : 'green' }">
            {{ scope.row.executeState }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <!--          <el-button-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-edit"-->
          <!--            @click="handleUpdate(scope.row)"-->
          <!--            v-hasPermi="['process:Handlbilltrace:edit']"-->
          <!--          >修改</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="viewFlow(scope.row)"
            v-hasPermi="['process:Handlbilltrace:remove']"
          >审批过程
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-tickets"
            @click="handleFlowRecord(scope.row)"
          >处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 添加或修改已完成的工作票对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1500px" append-to-body>
      <el-col :span="24" :xs="24" style="padding-right: 10px">
        <div id="parentDiv" style="width:100%; height:600px;">
          <div id="mygoChart" style="width:100%; height:600px;"></div>
        </div>
      </el-col>
      <div slot="footer" class="dialog-footer">
        <!--        <el-button type="primary" @click="submitForm">确 定</el-button>-->
        <el-button @click="cancel">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listHandlbilltrace,
  getHandlbilltrace,
  delHandlbilltrace,
  addHandlbilltrace,
  updateHandlbilltrace,
  exportHandlbilltrace,
  AlllistHandlbilltrace
} from "@/api/flowable/Handlbilltrace";
import jsPlumb from "jsplumb";
import Vue from 'vue/dist/vue.js';
import go from "gojs";
import {SerpentineLayout} from 'gojs/extensions/SerpentineLayout';
// 引入 ECharts
import echarts from "echarts";
Vue.prototype.$echarts = echarts;





window.jsplumb = jsPlumb.jsPlumb;
export default {
  name: "Handlbilltrace",
  data() {
    return {
      traceAngle: 0,
      traceAnglecount: 0,
      BillTraceList: [],
      jsPlumbInstance: '',
      setting: {
        anchors: ["Right", "Left"],
        endpoint: ["Dot", {radius: 3}],
        dragOptions: {cursor: 'pointer'},
        connector: ["Flowchart"],      //Bezier
        paintStyle: {stroke: "green", strokeWidth: 5},
        endpointStyle: {
          fill: "#ff0000",
          outlineStroke: "#ff0000",
          outlineWidth: 1,
          width: 5,
          length: 5
        },
        overlays: [["Arrow", {width: 15, length: 15, location: 1}]],
        isSource: true,
        isTarget: true,
        maxConnections: -1,
        connectorStyle: {
          gradient: {
            stops: [[3, "#00ff00"]]
          },
          strokeWidth: 2,
          stroke: "#00ffff"
        },
        connectorOverlays: [
          //["Label", { label: "", id: "label", cssClass: "labelStyle" }],
          ["Arrow", {width: 15, length: 15, location: 1}]
        ]
      },
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //存放超市和未超时
      flowStatelist: [],
      // 未完成的工作票表格数据
      HandlbilltraceList: [],
      HandlbilltraceListdetail: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        workId: null,
        workName: null,
        flowId: null,
        flowName: null,
        workItemId: null,
        receiverName: null,
        workItemDatetime: null,
        signName: null,
        signDate: null,
        workActivityId: null,
        workActivityState: null,
        finishedDatetime: null,
        nextActivityCodes: null,
        activityId: null,
        activityCode: null,
        activityName: null,
        nextActivityCode: null,
        sponsorName: null,
        createDatetime: null,
        mainBizKey: null,
        predictDatetime: null,
        executeState: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        workId: [
          {required: true, message: "工作ID不能为空", trigger: "blur"},
          {max: 38, message: "工作ID长度不能超过38", trigger: "blur"},

        ],
        workName: [
          {max: 256, message: "工作名称长度不能超过256", trigger: "blur"},

        ],
        flowId: [
          {required: true, message: "流程ID不能为空", trigger: "blur"},
          {max: 38, message: "流程ID长度不能超过38", trigger: "blur"},

        ],
        flowName: [
          {required: true, message: "流程名称不能为空", trigger: "blur"},
          {max: 64, message: "流程名称长度不能超过64", trigger: "blur"},

        ],
        workItemId: [
          {required: true, message: "工作项ID不能为空", trigger: "blur"},
          {max: 38, message: "工作项ID长度不能超过38", trigger: "blur"},

        ],
        receiverName: [
          {max: 255, message: "接收者名称长度不能超过255", trigger: "blur"},

        ],
        workItemDatetime: [],
        signName: [
          {max: 32, message: "签字人长度不能超过32", trigger: "blur"},

        ],
        signDate: [],
        workActivityId: [
          {required: true, message: "工作活动ID不能为空", trigger: "blur"},
          {max: 38, message: "工作活动ID长度不能超过38", trigger: "blur"},

        ],
        workActivityState: [
          {max: 38, message: "工作活动状态长度不能超过38", trigger: "blur"},

        ],
        finishedDatetime: [],
        nextActivityCodes: [],
        activityId: [
          {required: true, message: "活动ID不能为空", trigger: "blur"},
          {max: 38, message: "活动ID长度不能超过38", trigger: "blur"},

        ],
        activityCode: [
          {max: 3, message: "活动序号长度不能超过3", trigger: "blur"},

        ],
        activityName: [
          {max: 64, message: "活动名称长度不能超过64", trigger: "blur"},

        ],
        nextActivityCode: [],
        sponsorName: [
          {max: 16, message: "发起人名称长度不能超过16", trigger: "blur"},

        ],
        createDatetime: [
          {required: true, message: "创建时间不能为空", trigger: "blur"},

        ],
        mainBizKey: [
          {max: 256, message: "票据编码长度不能超过256", trigger: "blur"},

        ],
        predictDatetime: []
      }
    };
  },
  mounted() {
    //获取统计图数据
    this.myecharts()
  },

  created() {
    this.getList();
  },
  methods: {
    //调用后端获取超时流程和正常流程的接口
    getFlowState(){
      getFlowState().then(response => {
        this.flowStatelist = response.rows;
      });
    },
    myecharts()
    {
      var myChart = this.$echarts.init(document.getElementById('main'));
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '流程执行状态对比',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [this.flowStatelist.zhengchang,this.flowStatelist.chaoshi]
          }
        ]
      }
      myChart.setOption(option)
    },
    /** 查询未完成的工作票列表 */
    getList() {
      this.loading = true;
      listHandlbilltrace(this.queryParams).then(response => {
        this.HandlbilltraceList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workId: null,
        workName: null,
        flowId: null,
        flowName: null,
        workItemId: null,
        receiverName: null,
        workItemDatetime: null,
        signName: null,
        signDate: null,
        workActivityId: null,
        workActivityState: null,
        finishedDatetime: null,
        nextActivityCodes: null,
        activityId: null,
        activityCode: null,
        activityName: null,
        nextActivityCode: null,
        sponsorName: null,
        createDatetime: null,
        mainBizKey: null,
        predictDatetime: null,
        executeState: null
      };
      this.resetForm("form");
    },
    /** 流程流转记录 */
    handleFlowRecord(row) {
      console.log(row.mainBizKey)
      this.$router.push({
        path: '/flowable/endbilltrace/index',
        query: {
          workSheetCode: row.mainBizKey,
        }
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.workId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加未完成的工作票";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const workId = row.workId || this.ids
      getHandlbilltrace(workId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改未完成的工作票";
      });
    },
    /** 修改按钮操作 */
    viewFlow(row) {
      let that = this;
      this.reset();
      const workId = row.workId;
      this.title = row.workName + "工作流程图";
      console.log(row);
      that.timer = setInterval(() => {//等待el-dialog加载完毕，再调用flow()函数
        if (document.readyState === 'complete') {
          console.log("ready to load el-dialog and flow-chart");
          this.FlowDetail(row);
          this.open = true;
          window.clearInterval(that.timer);
        }
      }, 100);
    },
    FlowDetail(row) {
      console.log(this.ids[0]);
      let that = this;
      console.log(row)
      var data = {
        workId: row.workId,
        activityCode: row.activityCode,
        flowId: row.flowId,
        mainBizKey: row.mainBizKey,
        workName: row.workName,
        flowName: row.flowName,
        workActivityId: row.workActivityId
      };
      AlllistHandlbilltrace(data).then(response => {//根据工作单编码、工作id、流程id、工作单编码查找工作票轨迹
        // this.$modal.msgSuccess("插入成功");
        this.HandlbilltraceListdetail = response.data;//接收该工作票包括的所有流程
        console.log(this.BillTraceList);
        console.log("执行构造流程图函数");
        this.flow();
      })
    },
    flow() {
      var mygoChart = document.getElementById('mygoChart');
      var parentDiv = document.getElementById('parentDiv');
      parentDiv.removeChild(mygoChart);
      var div = document.createElement('div');
      div.setAttribute('id', 'mygoChart')
      parentDiv.appendChild(div);
      mygoChart = document.getElementById('mygoChart');
      mygoChart.style.width = "100%";
      mygoChart.style.height = "600px";
      var mySelf = this;
      const MAKE = go.GraphObject.make;
      let myModel = MAKE(go.TreeModel);
      // myModel.nodeDataArray=this.BillTraceList;
      console.log("nihao1")
      myModel.nodeDataArray = this.HandlbilltraceListdetail;
      mySelf.myDiagram = MAKE(go.Diagram, "mygoChart", {
        // initialContentAlignment: go.Spot.Center, // 居中显示
        "undoManager.isEnabled": true,// 支持 Ctrl-Z 和 Ctrl-Y 操作
        "toolManager.hoverDelay": 100,//tooltip提示显示延时
        "toolManager.toolTipDuration": 10000,//tooltip持续显示时间
        isReadOnly: false,//只读
        "grid.visible": false,//不显示网格
        allowMove: true,//允许拖动
        allowDragOut: true,
        allowDelete: false,
        allowCopy: false,
        allowClipboard: false,
        // toolManager.mouseWheelBehavior: go.ToolManager.WheelZoom,//有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
        layout: MAKE(SerpentineLayout)
      });//构建gojs对象
      console.log(mySelf.myDiagram);
      mySelf.myDiagram.addDiagramListener("ObjectSingleClicked", function (e) {
        debugger
        console.log(e.subject.part);
      });
      mySelf.myDiagram.addDiagramListener("BackgroundSingleClicked", function (e) {
        debugger
        console.log("Double-clicked at" + e.diagram.lastInput.documentPoint);
      });
      mySelf.myDiagram.addDiagramListener("ClipboardPasted", function (e) {
        debugger
        console.log("Pasted" + e.diagram.selection.count + "parts");
      });
      // 定义个简单的 Node 模板
      mySelf.myDiagram.nodeTemplate =
        MAKE(go.Node, "Auto", new go.Binding("location", "loc", go.Point.parse),
          MAKE(go.Shape, {"fill": "white"}),
          "Auto",//Vertical,Auto,Horizontal
          MAKE(go.Panel, "Horizontal", {padding: 1},
            MAKE(go.Panel, "Vertical", {padding: 0},
              MAKE(go.TextBlock, "Default Text", {
                margin: 5,
                font: "14px sans-serif",
              }, (new go.Binding("stroke", "backcolor")), (new go.Binding("text", "workName"))),
              MAKE(go.TextBlock, "Default Text", {
                margin: 5,
                font: "14px sans-serif",
              }, (new go.Binding("stroke", "backcolor")), (new go.Binding("text", "FlowName"))),
              MAKE(go.TextBlock, "Default Text", {
                margin: 5,
                font: "14px sans-serif",
              }, (new go.Binding("stroke", "backcolor")), (new go.Binding("text", "activityName"))),
            ),
          ),
          {
            mouseEnter: function (e, node, prev) {
              console.log('mouseEnter');
            },
            mouseLeave: function (e, node, prev) {
              mySelf.detailShow = false;
            },
          },
          {
            toolTip: MAKE(go.Adornment, "Spot",
              MAKE(go.TextBlock,
                {margin: 4, stroke: "black"}, new go.Binding("text", "signTitle",),
              )
            )
          }
        );
      mySelf.myDiagram.linkTemplate = MAKE(go.Link,
        {curve: go.Link.Bezier},  // 贝塞尔曲线
        {routing: go.Link.Orthogonal, corner: 5},
        MAKE(go.Shape, {strokeWidth: 2}, new go.Binding("stroke", "linkColor")),
        MAKE(go.Shape, {
          toArrow: "Standard",
          fill: "#000",
          stroke: null,
          angle: (this.traceAngle = (this.traceAnglecount++ >= 5 ? 0 : this.traceAngle + 90))
        }),//箭头
        MAKE(go.TextBlock,
          {
            //margin: 20,
            stroke: "blue",
            //font: "14px sans-serif",
            //width:50,
            //wrap: go.TextBlock.WrapDesiredSize
          },
          new go.Binding("text", "linktext")),
        {
          toolTip: MAKE(go.Adornment, "Auto",
            MAKE(go.Shape, {fill: "#1c1314"}),
            MAKE(go.TextBlock, {margin: 4}, new go.Binding("text", "FlowName"))
          )  // end of Adornment
        },
      )// the link shape
      mySelf.myDiagram.model = myModel;
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.workId != null) {
            updateHandlbilltrace(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addHandlbilltrace(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const workIds = row.workId || this.ids;
      this.$modal.confirm('是否确认删除未完成的工作票编号为"' + workIds + '"的数据项？').then(function () {
        return delHandlbilltrace(workIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有未完成的工作票数据项？').then(() => {
        this.exportLoading = true;
        return exportHandlbilltrace(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    }
  }
};
</script>
